<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
  <title>申请列表</title>
  <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/mui/3.4.0/js/mui.min.js"></script>
  <link href="./css/apply/style.css" rel="stylesheet">
  <script type="text/javascript">
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth
          if (!clientWidth) return
          docEl.style.fontSize = 75 * (clientWidth / 375) + 'px'
        }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
    //mui阻止了url跳转
    mui(document).on('tap', 'a', function () {
      var a = document.createElement('a')
      a = this.cloneNode(true)
      a.click()
    })
  </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: rgba(46,46,46,0.60);"></a>
  <h1 class="mui-title">申请列表</h1>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <ul class="mui-table-view mui-table-view-chevron">
      <li class="apply-alone">
        <div class="apply-left">
          <img src="./images/images_camping.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="apply-right">
          <div class="apply-title">途居露营地</div>
          <div class="address">
            <img src="./images/icon_location.png" alt="" class="address-icon">
            芜湖市经济开发区房车营测试的地址芜湖市经济开发区房车营测试的地址
          </div>
          <a class="mui-btn mui-btn-primary mui-btn-outlined check-btn" href="result.html">查看</a>
        </div>
      </li>
      <li class="apply-alone">
        <div class="apply-left">
          <img src="./images/images_camping.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="apply-right">
          <div class="apply-title">XX景点</div>
          <div class="address">
            <img src="./images/icon_location.png" alt="" class="address-icon">
            这个景点的特色-幽静
          </div>
          <a class="mui-btn mui-btn-primary mui-btn-outlined check-btn" href="result.html">查看</a>
        </div>
      </li>
      <li class="apply-alone">
        <div class="apply-left">
          <img src="./images/images_camping.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="apply-right">
          <div class="apply-title">XX景点</div>
          <div class="address">
            <img src="./images/icon_location.png" alt="" class="address-icon">
            这个景点的特色-幽静
          </div>
          <a class="mui-btn mui-btn-primary mui-btn-outlined check-btn" href="result.html">查看</a>
        </div>
      </li>
      <li class="apply-alone">
        <div class="apply-left">
          <img src="./images/images_camping.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="apply-right">
          <div class="apply-title">XX景点</div>
          <div class="address">
            <img src="./images/icon_location.png" alt="" class="address-icon">
            这个景点的特色-幽静
          </div>
          <a class="mui-btn mui-btn-primary mui-btn-outlined check-btn" href="result.html">查看</a>
        </div>
      </li>
      <li class="apply-alone">
        <div class="apply-left">
          <img src="./images/images_camping.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="apply-right">
          <div class="apply-title">XX景点</div>
          <div class="address">
            <img src="./images/icon_location.png" alt="" class="address-icon">
            这个景点的特色-幽静
          </div>
          <a class="mui-btn mui-btn-primary mui-btn-outlined check-btn" href="result.html">查看</a>
        </div>
      </li>
      <li class="apply-alone">
        <div class="apply-left">
          <img src="./images/images_camping.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="apply-right">
          <div class="apply-title">XX景点</div>
          <div class="address">
            <img src="./images/icon_location.png" alt="" class="address-icon">
            这个景点的特色-幽静
          </div>
          <a class="mui-btn mui-btn-primary mui-btn-outlined check-btn" href="result.html">查看</a>
        </div>
      </li>
      <li class="apply-alone">
        <div class="apply-left">
          <img src="./images/images_camping.png" alt="" style="width: 100%;height:100%;">
        </div>
        <div class="apply-right">
          <div class="apply-title">XX景点</div>
          <div class="address">
            <img src="./images/icon_location.png" alt="" class="address-icon">
            这个景点的特色-幽静
          </div>
          <a class="mui-btn mui-btn-primary mui-btn-outlined check-btn" href="result.html">查看</a>
        </div>
      </li>
    </ul>
  </div>
</div>
<script>
  /**
   初始化下来刷新+上拉加载更多，如果不需要可删除初始化配置
   **/
  mui.init({
    pullRefresh: {
      container: '#pullrefresh',
      down: {
        callback: pulldownRefresh
      },
      up: {
        contentrefresh: '正在加载...',
        callback: pullupRefresh
      }
    }
  })

  /**
   * 下拉刷新具体业务实现
   */
  function pulldownRefresh () {
    console.log('下拉刷新')
    mui('#pullrefresh').pullRefresh().endPulldownToRefresh() //刷新完成
  }

  /**
   * 上拉加载具体业务实现
   */
  function pullupRefresh () {
    console.log('上拉加载')
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true) //参数为true代表没有更多数据了。
  }
</script>
</body>
</html>